<template>
	<view class=" ">
		<view class="bg-white  p-10">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="p-t-10 p-b-10">
					<view class="banmi_flex a-c" style="flex-wrap: wrap;">
						<view class="m-5 banmi_flex a-c" style="width: 150px;">
							<text class="f-14 ">会员状态:</text>
							<uni-data-select class="m-l-10" @change="change_status" :clear="false" :value="status"
								:localdata="localdata_status">
							</uni-data-select>
						</view>
						<view class="m-5">
							<uni-easyinput v-model="uid" placeholder="请输入用户uid">
							</uni-easyinput>
						</view>
						<view class="m-5">
							<uni-easyinput v-model="tel" placeholder="请输入手机号">
							</uni-easyinput>
						</view>
						<view class="m-5">
							<uni-easyinput v-model="account" placeholder="请输入账号">
							</uni-easyinput>
						</view>
						<view class="m-5">
							<uni-easyinput v-model="nickname" placeholder="请输入昵称">
							</uni-easyinput>
						</view>
						<view class="m-5">
							<button @click="on_add(0)" type="primary" size="mini">新增</button>
						</view>
						<view class="m-5">
							<button @click="on_search" type="primary" size="mini">查询</button>
						</view>
						<view class="m-5">
							<button @click="on_search_resetting" type="primary" size="mini">重置</button>
						</view>
					</view>
				</view>


				<uni-table border stripe type="selection" class="m-5" :type="'2'" @selection-change="selectionData">
					<uni-tr>
						<uni-th align="center" width="30px">uid</uni-th>
						<uni-th align="center">登陆信息</uni-th>
						<uni-th align="center">余额(元)</uni-th>
						<uni-th align="center">分销(内置)</uni-th>
						<uni-th align="center">头像</uni-th>
						<uni-th align="center">昵称</uni-th>
						<uni-th align="center">注册信息</uni-th>
						<uni-th align="left">状态</uni-th>
						<uni-th align="left" width="130px">管理</uni-th>
					</uni-tr>

					<uni-tr v-for="(vo,index) in users" :key="index">
						<uni-td align="center">

							{{vo.uid}}

						</uni-td>
						<uni-td>
							<view class="flex j-c">
								手机:{{vo.tel}}
							</view>
							<view class="flex j-c" v-if="vo.account">
								账号:{{vo.account}}
							</view>

						</uni-td>
						<uni-td align="center">
							{{vo.money/100}}
						</uni-td>
						<uni-td>
							<view class="flex j-c">
								一级UID:{{vo.master_oen}}
							</view>
							<view class="flex j-c">
								二级UID:{{vo.master_two}}
							</view>
						</uni-td>
						<uni-td align="center">
							<image class="q_y" :src="vo.face|getFace" style="width: 80px;height: 80px;" mode="">
							</image>
						</uni-td>
						<uni-td align="center">
							{{vo.nickname}}
						</uni-td>
						<uni-td buts="buts">
							<view class="flex j-c">
								注册时间:{{vo.reg_time|getTime}}
							</view>
							<view class="flex j-c">
								注册IP:{{vo.lastip}}
							</view>
							<view class="flex j-c">
								最后登陆:{{vo.end_time|getTime}}
							</view>
						</uni-td>
						<uni-td :class="vo.status==1 ? 'feng' : 'aa'" align="center">
							{{vo.status==0? '正常':vo.status==1? '封禁,' :vo.status==2? '自行注销,' :'注销已清空注册信息' }}
							<text v-if="vo.status==1">原因:{{vo.text}}</text>
						</uni-td>
						<uni-td buts="buts" align="center" class="operate_right">
							<view class="">
								<button @click="on_log(vo.uid)" type="primary" size="mini">登陆日志</button>
							</view>
							<view class="">
								<button @click="on_money_log(vo.uid)" type="primary" size="mini">余额日志</button>
							</view>
							<view class="">
								<button @click="on_show_userinfo(vo.uid)" type="primary" size="mini">注册详情</button>
							</view>
							<view class="">
								<button @click="on_add(vo.uid)" type="primary" size="mini">编辑用户</button>
							</view>
							<view class="">
								<button @click="on_userid(vo.uid,index)" type="warn" size="mini">禁用解封</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>

				<view class="p-10">
					<uni-pagination @change="getPage" show-icon="true" :total="total" current="1"
						style="float: left;margin-bottom: 10px;"></uni-pagination>
				</view>
			</scroll-view>
		</view>


		<edit ref="component_edit" @confirm="confirm_edit">
		</edit>
		<logs ref="component_logs" @confirm="confirm_logs">
		</logs>
		<moneyLogs ref="component_moneyLogs" @confirm="confirm_lmoneyLogs">
		</moneyLogs>
		<regFind ref="component_regFind" @confirm="confirm_regFind">
		</regFind>


		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-beizhu cancelText="取消" confirmText="确认" lei="0" :name="name" :keya="keya" @confirm="ban_ajax">
			</uni-popup-beizhu>
		</uni-popup>
	</view>
</template>

<script>
	import edit from './edit.vue';
	import logs from './logs.vue';
	import moneyLogs from './money_logs.vue';
	import regFind from './reg_find.vue';
	export default {
		components: {

			edit,
			logs,
			moneyLogs,
			regFind
		},
		data() {
			return {
				users: [],
				last_page: 0,
				total: 0,
				page: 1,
				name: '',
				keya: '',
				fromsData: {
					user_name: '',
					email: ''
				},
				uid: '',
				tel: '',
				account: '',
				nickname: '',
				is_uid: 0,
				status: 0,
				localdata_status: [{
						"value": 0,
						"text": "正常",
					},
					{
						"value": 1,
						"text": "封禁",
					},
					{
						"value": 2,
						"text": "注销",
					},
				],
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			change_status(val) {
				this.status = val
			},
			confirm_edit() {
				if (this.id == 0) {
					this.page = 1;
				}
				this.init();
			},
			on_add(uid) {
				this.id = uid;
				this.$refs.component_edit.init(uid)
			},

			on_log(uid) {
				this.$refs.component_logs.init(uid)
			},
			on_money_log(uid) {
				this.$refs.component_moneyLogs.init(uid)
			},
			on_show_userinfo(uid) {
				this.is_uid = uid;
				this.$refs.component_regFind.init(uid)
			},
			on_userid(uid, id) {
				var that = this;
				this.uid = uid;
				this.id = id;
				uni.showActionSheet({
					itemList: ['解除封禁', '永久封禁', '删除账号'],
					success: function(res) {
						if (res.tapIndex == 0) {
							var name = '确认要解封吗？';
						} else if (res.tapIndex == 1) {
							var name = '确认要封禁吗？';
						} else if (res.tapIndex == 2) {
							var name = '确认要删除吗？';
						}
						that.on_banned(res.tapIndex, name, uid, id);
					}
				});
			},
			on_banned(tapIndex, text, uid, id) {
				this.tapIndex = tapIndex;
				if (tapIndex == 1) {
					this.name = '请输入封禁的理由';
					this.keya = 'ban';
					this.$refs.alertDialog.open()
					return
				}

				var that = this;
				uni.showModal({
					title: '提示',
					content: text,
					success: function(res) {
						if (res.confirm) {
							that.ajax_state(uid, tapIndex, id);
						}
					}
				});
			},
			async ajax_state(uid, tapIndex, id) {
				var that = this;
				let requestParams = {
					page: 1,
					uid: this.uid,
					text: 0,
					tapIndex: this.tapIndex
				};
				const ret = await this.Banmikeji.user_user_state(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: "none"
				})
				this.users[that.id]['status'] = 1;
				if (tapIndex == 0) {
					this.users[id]['status'] = 0;
				} else {
					that.users = that.users.filter(t => t.uid != that.uid);
				}

			},
			async ban_ajax(val) {
				var that = this;
				let requestParams = {
					page: 1,
					uid: this.uid,
					text: val,
					tapIndex: this.tapIndex
				};

				const ret = await this.Banmikeji.user_user_state(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: "none"
				})
				this.users[that.id]['status'] = 1;
				that.$refs.alertDialog.close()
			},
			getPage(id) {
				this.page = id.current;
				this.init()
			},
			on_search() {
				this.init();
			},
			on_search_resetting() {
				this.uid = '';
				this.tel = '';
				this.nickname = '';
				this.account = '';
				this.init();
			},
			async init() {
				let requestParams = {
					page: this.page,
					uid: this.uid,
					tel: this.tel,
					nickname: this.nickname,
					account: this.account,
					status: this.status,
				};
				const ret = await this.Banmikeji.user_index(requestParams);
				this.users = ret.data.users.list.data;
				this.total = ret.data.users.list.total;
			},
		}
	}
</script>

<style>
	button {
		padding: 5rpx 10rpx;
	}

	button::after {
		border: none;
		background-color: none;

	}

	.operate_right {
		position: sticky;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}

	.m-5 {
		margin: 5px;
	}
</style>